<template>
	<view>
		<view class="profile">
			<view class="inner">
				<view class="avatar">
					<image :src="bminfo.logo" mode="">
					</image>
				</view>
				<view class="exp">
					<view class="name">
						<text>{{bminfo.name}}</text>
					</view>
					<view class="uid">
						<text>{{bminfo.account_title}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="quciker">
			<view class="inner">
				<view class="data">
					<view class="item">
						<text>{{bminfo.zan_num}}</text>
						<text>获赞</text>
					</view>
					<view class="item">
						<text>{{bminfo.sc_num}}</text>
						<text>收藏</text>
					</view>
					<view class="item">
						<text>{{bminfo.gz_num}}</text>
						<text>粉丝</text>
					</view>
				</view>
			</view>
			<view class="shop">
				<navigator class="link" url="/pages/video/myred" hover-class="none">
					<view class="icon">
						<image src="https://wx.2024csnl.com/static/douyin/douyin-repackage2.png" mode="">
						</image>
					</view>
					<view class="text">
						<text>编辑红包</text>
					</view>
				</navigator>
			</view>
			<view class="flow">
				<button @click="tapFollow">
					<image src="https://wx.2024csnl.com/static/douyin/douyin-add.png" mode="">
					</image>
					<text>发布视频</text>
				</button>
			</view>
		</view>
		<view class="works">
			<view class="thead">
				<text :class="currentTab == 'video' ? 'on': ''" @click="changeTab('video')">我的作品</text>
				<text :class="currentTab == 'gz' ? 'on': ''" @click="changeTab('gz')">我的关注</text>
				<text :class="currentTab == 'zan' ? 'on': ''" @click="changeTab('zan')">我的点赞</text>
				<text :class="currentTab == 'sc' ? 'on': ''" @click="changeTab('sc')">我的收藏</text>
			</view>
			<view class="tbody" v-if="currentTab == 'video'">
				<view class="list">
					<view v-for="(item, index) in list" :key="index" class="item">
						<view class="link" @click="toVideo(item)" hover-class="none">
							<view class="cover">
								<view class="img">
									<image :src="`${item.url}.cover.jpg`" mode="aspectFill">
									</image>
								</view>
								<view style="text-align: center;">
									<text style="text-align: center; color: #999;">{{item.status_txt}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tbody" v-if="currentTab == 'gz'">
				<view class="list">
					<view v-for="(item, index) in gzlist" :key="index" class="item">
						<view class="link" @click="toSj(item)" hover-class="none">
							<view class="cover">
								<view class="img">
									<image :src="item.logo" mode="aspectFill">
									</image>
								</view>
								<view style="text-align: center;">
									<text style="text-align: center; color: #999;">{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tbody" v-if="currentTab == 'zan'">
				<view class="list">
					<view v-for="(item, index) in zanlist" :key="index" class="item">
						<view class="link" @click="playVideo(item)" hover-class="none">
							<view class="cover">
								<view class="img">
									<image :src="`${item.url}.cover.jpg`" mode="aspectFill">
									</image>
								</view>
								<view style="text-align: center;">
									<text style="text-align: center; color: #999;">{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="tbody" v-if="currentTab == 'sc'">
				<view class="list">
					<view v-for="(item, index) in sclist" :key="index" class="item">
						<view class="link" @click="playVideo(item)" hover-class="none">
							<view class="cover">
								<view class="img">
									<image :src="`${item.url}.cover.jpg`" mode="aspectFill">
									</image>
								</view>
								<view style="text-align: center;">
									<text style="text-align: center; color: #999;">{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postVideoData,
		postVideoDataNotLoading,
		getAppConfigSync
	} from "../../api/index.js"

	export default {
		data() {
			return {
				currentTab: "video",
				pageSize: 20,
				pagenum: 1,
				vid: 0,
				list: [],
				gzlist: [],
				zanlist: [],
				sclist: [],
				bminfo: {}
			}
		},
		onLoad() {

		},
		onReachBottom() {
			this.pagenum += 1
			if (this.currentTab == "video") {
				this.onGetVideoHomeInfo("bottom");
			} else if (this.currentTab == "gz") {
				this.onGetmygzlist("bottom");
			} else if (this.currentTab == "zan") {
				this.onGetmyzanlist("bottom");
			} else if (this.currentTab == "sc") {
				this.onGetmysclist("bottom");
			}
		},
		onShow() {
			this.pagenum = 1;
			if (this.currentTab == "video") {
				this.onGetVideoHomeInfo();
			} else if (this.currentTab == "gz") {
				this.onGetmygzlist();
			} else if (this.currentTab == "zan") {
				this.onGetmyzanlist();
			} else if (this.currentTab == "sc") {
				this.onGetmysclist();
			}
		},
		methods: {
			changeTab(tab) {
				this.currentTab = tab;
				this.pagenum = 1;
				if (this.currentTab == "video") {
					this.onGetVideoHomeInfo();
				} else if (this.currentTab == "gz") {
					this.onGetmygzlist();
				} else if (this.currentTab == "zan") {
					this.onGetmyzanlist();
				} else if (this.currentTab == "sc") {
					this.onGetmysclist();
				}
			},
			toVideo(item) {
				uni.navigateTo({
					url: `/pages/video/publishVideo?id=${item.id}`
				})
			},
			toSj(item) {
				if (item.type == "member") {
					uni.navigateTo({
						url: "/pages/video/bizview?mbid=" + item.mbid
					})
				} else {
					uni.navigateTo({
						url: "/pages/video/bizview?bid=" + item.bid
					})
				}

			},
			playVideo(item) {
				uni.setStorageSync('vid', item.id)
				uni.navigateTo({
					url: "/pages/tab/video"
				})
			},
			//点击关注
			async tapFollow() {
				uni.navigateTo({
					url: "/pages/video/publishVideo"
				})
			},
			// 唯品会搜索-未对接
			async onGetVideoHomeInfo(type) {
				const res = await postVideoData('s=/ApiShortvideo/homeinfo', {
					pagenum: this.pagenum
				})
				console.log(res, "res---")
				const {
					status,
					msg,
					bminfo,
					datalist
				} = res.data

				if (status == 1) {
					this.bminfo = bminfo;
					// this.totalPage = data.totalNum
					type == 'bottom' ? this.list.push(...datalist) : this.list = datalist
					// this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			// 唯品会搜索-未对接
			async onGetmygzlist(type) {
				const res = await postVideoData('s=/ApiShortvideo/mygzlist', {
					pagenum: this.pagenum
				})
				console.log(res, "res---")
				const {
					status,
					msg,
					datalist
				} = res.data

				if (status == 1) {
					// this.totalPage = data.totalNum
					type == 'bottom' ? this.gzlist.push(...datalist) : this.gzlist = datalist
					// this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			// 唯品会搜索-未对接
			async onGetmyzanlist(type) {
				const res = await postVideoData('s=/ApiShortvideo/myzanlist', {
					pagenum: this.pagenum
				})
				console.log(res, "res---")
				const {
					status,
					msg,
					datalist
				} = res.data

				if (status == 1) {
					// this.totalPage = data.totalNum
					type == 'bottom' ? this.zanlist.push(...datalist) : this.zanlist = datalist
					// this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			// 唯品会搜索-未对接
			async onGetmysclist(type) {
				const res = await postVideoData('s=/ApiShortvideo/mysclist', {
					pagenum: this.pagenum
				})
				console.log(res, "res---")
				const {
					status,
					msg,
					datalist
				} = res.data

				if (status == 1) {
					// this.totalPage = data.totalNum
					type == 'bottom' ? this.sclist.push(...datalist) : this.sclist = datalist
					// this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.window {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		z-index: 100;

		.button {
			position: absolute;
			right: 0;
			top: 0;
			padding: 40rpx;

			.icon {
				display: inline-block;
				vertical-align: middle;
				padding: 4rpx;
				background: fade(#000000, 20%);
				border-radius: 50%;
				margin-left: 20rpx;

				image {
					display: block;
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}

	.profile {
		position: relative;
		z-index: 0;
		background: -webkit-linear-gradient(top, #d73e39, #f27b7c);
		padding: 80rpx 40rpx 80rpx;

		.inner {
			position: relative;
			display: flex;
		}

		.avatar {
			position: relative;

			image {
				display: block;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background: #000000;
				border: 4rpx solid #ffffff;
			}
		}

		.exp {
			margin: 10rpx 0 0 20rpx;
		}

		.name {
			height: 60rpx;
			line-height: 60rpx;

			text {
				display: inline-block;
				vertical-align: middle;
				font-size: 40rpx;
				font-weight: bold;
				color: #ffffff;
			}

			image {
				display: inline-block;
				vertical-align: middle;
				width: 40rpx;
				height: 40rpx;
				margin: 0 0 0 10rpx;
			}
		}

		.uid {
			height: 40rpx;
			line-height: 40rpx;

			text {
				font-size: 26rpx;
				color: #ffffff;
				opacity: .8;
			}
		}
	}

	.quciker {
		position: relative;
		z-index: 1;
		background: #ffffff;
		border-radius: 40rpx;
		margin: -40rpx 0 0 0;
		padding: 40rpx 0 0;

		.inner {
			position: relative;
		}

		.data {
			position: relative;
			display: flex;

			.item {
				margin: 0 0 0 40rpx;

				text {
					color: #999999;

					&:nth-child(1) {
						color: #000000;
						font-weight: bold;
						margin-right: 4rpx;
					}
				}

			}
		}

		.shop {
			position: relative;
			margin: 40rpx;

			.link {
				display: flex;

				.icon {
					image {
						display: block;
						width: 100rpx;
						height: 100rpx;
						border-radius: 10rpx;
					}
				}

				.text {
					margin: 0 0 0 20rpx;

					text {
						display: block;

						&:nth-child(1) {
							height: 100rpx;
							line-height: 100rpx;
							color: #000000;
						}

					}
				}
			}
		}
	}

	.flow {
		position: relative;
		margin: 40rpx;

		button {
			position: relative;
			background: #fc3e5a;
			border: 0;

			image {
				display: inline-block;
				vertical-align: middle;
				width: 40rpx;
				height: 40rpx;
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #ffffff;
				font-size: 30rpx;
				margin: 0 0 0 10rpx;
			}
		}
	}

	.works {
		position: relative;
		background: #ffffff;

		.thead {
			margin: 0 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 1px solid #ccc;
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;

			text {
				text-align: center;
				flex: 1;
				font-size: 34rpx;
			}

			text.on {
				background-color: #d73e39;
				border-radius: 5px;
				color: #ffffff;
			}
		}

		.tbody {
			width: 90%;
			margin: auto;

			.list {
				display: flex;
				flex-wrap: wrap;
			}

			.item {
				width: 33.33%;
				margin-top: 5px;
			}

			.link {
				margin: 1rpx;
			}

			.cover {
				.img {
					position: relative;
					padding: 0 0 100%;

					image {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						display: block;
						background: #000000;
					}
				}
			}
		}
	}

	.tabbar {
		position: relative;
		height: 120rpx;

		.inner {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 50;
			display: flex;
			height: 120rpx;
			background: #ffffff;
		}

		.item {
			flex: 4;

			&:nth-child(3) {
				flex: 5;
			}
		}

		.link {
			position: relative;
			display: block;
			text-align: center;
			padding: 10rpx;
		}

		.icon {
			image {
				width: 50rpx;
				height: 50rpx;
			}

			text {
				display: block;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 26rpx;
				color: #dc696c;
			}
		}

		.plus {
			padding: 10rpx 0;

			image {
				width: 100rpx;
				height: 60rpx;
				padding: 10rpx;
				background: #dc696c;
				border-radius: 20rpx;
			}
		}
	}
</style>